<template>
	<div ref="chart" :style="{width: width, height: height}"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'RingChart',
	props: {
		// 数据
		data: {
			type: Array,
			required: true
		},
		// 圆环图宽度
		width: {
			type: String,
			default: '120px'
		},
		// 圆环图高度
		height: {
			type: String,
			default: '120px'
		},
		name: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			chartInstance: null
		};
	},
	mounted() {
		this.initChart();
	},
	beforeDestroy() {
		if (this.chartInstance) {
			this.chartInstance.dispose();
			this.chartInstance = null;
		}
	},
	methods: {
		initChart() {
			this.chartInstance = echarts.init(this.$refs.chart);
			const len = this.data.length
			const colors = []
			for (let i = 0; i < len; i++) {
				colors.push(this.generateRandomHexColor())
			}
			
			const option = {
				color: colors,
				series: [
					{
						type: 'pie',
						radius: ['70%', '90%'], // 这里定义了内外半径，形成圆环
						data: this.data.map(item => ({ value: item.value, name: item.name })),
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						label: {
							show: false
						},
						
						labelLine: {
							show: false
						}
					}
				],
				tooltip: {
					trigger: 'item', // 触发类型，'item' 表示数据项图形触发
					formatter: '{b}: {c} ({d}%)',// 提示框格式器，{a}：系列名，{b}：数据名，{c}：数据值，{d}%：百分比
					// position: function (pt, params, dom, rect, size) {
					// 	// 尝试获取默认位置
					// 	var position = echarts.getInstanceByDom(dom).ecPosition;
					// 	return position;
					// },
					confine: true
				},
				graphic: {
					elements: [
						{
							type: 'text',
							left: 'center',
							top: 'center',
							style: {
								text: this.name, // 假设这是个方法，用于计算并返回总和或其他文本
								textAlign: 'center',
								fill: '#fff', // 文字颜色
								fontSize: this.fitChartSize(16), // 文字大小
							}
						}
					]
				}
			};
			this.chartInstance.setOption(option);
		},
		generateRandomHexColor() {
			const techToneBias = [0, 50, 100, 150, 200]; // 偏向的色调基数，这里选择冷色调范围
			const techSaturationBoost = 50; // 增加饱和度以使颜色更加鲜明，符合科技感
			const letters = '0123456789ABCDEF';
			
			const selectBias = () => techToneBias[Math.floor(Math.random() * techToneBias.length)];
			
			const generateComponent = (bias) => {
				// 确保颜色在科技感的基调上，同时有一定随机性
				const value = Math.floor(Math.random() * 101) + bias;
				// 增加饱和度效果，避免过于暗淡
				const saturatedValue = Math.min(value + techSaturationBoost, 255);
				return saturatedValue.toString(16).padStart(2, '0');
			}
			
			const red = generateComponent(selectBias());
			const green = generateComponent(selectBias());
			const blue = generateComponent(selectBias());
			
			const color = `#${red}${green}${blue}`;
			return color.toUpperCase();
			// const minComponentValue = 50 // 最小分量值，确保颜色不过于接近白色
			// const letters = '0123456789ABCDEF'
			//
			// const generateComponent = () => {
			// 	return Math.floor(Math.random() * (256 - minComponentValue) + minComponentValue)
			// }
			//
			// const red = generateComponent()
			// const green = generateComponent()
			// const blue = generateComponent()
			//
			// const color = `#${red.toString(16)}${green.toString(16)}${blue.toString(16)}`
			// return color.toUpperCase()
		}
	},
	watch: {
		data: {
			handler() {
				this.chartInstance && this.chartInstance.setOption({
					series: [
						{
							data: this.data.map(item => ({ value: item.value, name: item.name }))
						}
					]
				});
			},
			deep: true
		}
	}
};
</script>